<template>
  <ele-modal
    form
    :width="900"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <ele-page>
      <ele-card class="step-card">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="108px">
          <el-form-item label="交强险和商业险" prop="insuranceList">
            <span
              class="blue pointer"
              v-if="form.insuranceList.length == 0"
              @click="openInsurance"
              >请选择</span
            >
            <span class="blue pointer" @click="openInsurance" v-else>{{
              selected
            }}</span>
          </el-form-item>
          <el-form-item label="附加险种" prop="other">
            <el-select
              v-model="form.other"
              multiple
              placeholder="请选择"
              style="width: 500px"
            >
              <el-option label="超赔险" value="超赔险" />
              <el-option label="货运险" value="货运险" />
              <el-option label="安责险" value="安责险" />
              <el-option label="承运险" value="承运险" />
              <el-option label="驾意险" value="驾意险" />
            </el-select>
          </el-form-item>
          <el-form-item label="管理费" prop="guanlifei_price">
            <el-input v-model="form.guanlifei_price" style="width: 150px">
              <template #prepend>应收</template>
              <template #append>元</template>
            </el-input>
            <el-input
              v-model="form.guanlifei_paid"
              style="width: 150px"
              class="ml8"
            >
              <template #prepend>实收</template>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="GPS费" prop="gps_price">
            <el-input v-model="form.gps_price" style="width: 150px">
              <template #prepend>应收</template>
              <template #append>元</template>
            </el-input>
            <el-input v-model="form.gps_paid" style="width: 150px" class="ml8">
              <template #prepend>实收</template>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="二保费" prop="eb_price">
            <el-input v-model="form.eb_price" style="width: 150px">
              <template #prepend>应收</template>
              <template #append>元</template>
            </el-input>
            <el-input v-model="form.eb_paid" style="width: 150px" class="ml8">
              <template #prepend>实收</template>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="学习费" prop="xx_price">
            <el-input v-model="form.xx_price" style="width: 150px">
              <template #prepend>应收</template>
              <template #append>元</template>
            </el-input>
            <el-input v-model="form.xx_paid" style="width: 150px" class="ml8">
              <template #prepend>实收</template>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="盖章费" prop="gz_price">
            <el-input v-model="form.gz_price" style="width: 150px">
              <template #prepend>应收</template>
              <template #append>元</template>
            </el-input>
            <el-input v-model="form.gz_paid" style="width: 150px" class="ml8">
              <template #prepend>实收</template>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="法务费" prop="fw_price">
            <el-input v-model="form.fw_price" style="width: 150px">
              <template #prepend>应收</template>
              <template #append>元</template>
            </el-input>
            <el-input v-model="form.fw_paid" style="width: 150px" class="ml8">
              <template #prepend>实收</template>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="其他费用" prop="amount">
            <el-input v-model="form.qita_price" style="width: 150px">
              <template #prepend>应收</template>
              <template #append>元</template>
            </el-input>
            <el-input v-model="form.qita_paid" style="width: 150px" class="ml8">
              <template #prepend>实收</template>
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="实际支付" prop="paid">
            <el-input v-model="form.paid" style="width: 150px">
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="付款图片" prop="pay_images">
            <image-upload :limit="10" v-model="form.pay_images" />
          </el-form-item>
          <el-form-item label="垫付" prop="account">
            <el-radio-group v-model="form.dianfu">
              <el-radio-button label="无">无</el-radio-button>
              <el-radio-button label="有垫付">有垫付</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="垫付金额"
            prop="dianfu_amount"
            v-if="form.dianfu != '无'"
          >
            <el-input v-model="form.dianfu_amount" style="width: 130px">
              <!--<template #prepend>应收</template>-->
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="垫付利率"
            prop="dianfu_interest_rate"
            v-if="form.dianfu != '无'"
          >
            <el-input v-model="form.dianfu_interest_rate" style="width: 130px">
              <!--<template #prepend>应收</template>-->
              <template #append>%</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="还款期数"
            prop="dianfu_times"
            v-if="form.dianfu != '无'"
          >
            <el-input v-model="form.dianfu_times" style="width: 130px">
              <template #append>期</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="首期还款日"
            prop="dianfu_start_date"
            v-if="form.dianfu != '无'"
          >
            <el-date-picker
              v-model="form.dianfu_start_date"
              type="date"
              style="width: 130px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item
            label="垫付材料"
            prop="pay_account"
            v-if="form.dianfu != '无'"
          >
            <image-upload :limit="10" v-model="form.dianfu_images" />
          </el-form-item>
          <el-form-item label="分期" prop="account">
            <el-radio-group v-model="form.fenqi">
              <el-radio-button label="无">无</el-radio-button>
              <el-radio-button label="有分期">有分期</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="分期金额"
            prop="fenqi_amount"
            v-if="form.fenqi != '无'"
          >
            <el-input v-model="form.fenqi_amount" style="width: 130px">
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="分期利率"
            prop="fenqi_interest_rate"
            v-if="form.fenqi != '无'"
          >
            <el-input v-model="form.fenqi_interest_rate" style="width: 130px">
              <template #append>%</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="期数"
            prop="fenqi_times"
            v-if="form.fenqi != '无'"
          >
            <el-input v-model="form.fenqi_times" style="width: 130px">
              <template #append>期</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="首次还款日"
            prop="fenqi_start_date"
            v-if="form.fenqi != '无'"
          >
            <el-date-picker
              v-model="form.fenqi_start_date"
              type="date"
              placeholder=""
              style="width: 130px"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item
            label="分期材料"
            prop="pay_account"
            v-if="form.fenqi != '无'"
          >
            <image-upload :limit="10" v-model="form.images" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" style="width: 500px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="save">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </ele-card>
      <insurance
        v-model="showInsurance"
        :vehicle-id="props.vehicleId"
        :plate-number="props.plateNumber"
        @done="chooseDone"
      />
    </ele-page>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, watch, computed } from 'vue';
  import { updateTrade } from '@/api/company';
  import Insurance from './insurance.vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import ImageUpload from '@/components/ImageUpload/index.vue';

  import { useFormData } from '@/utils/use-form-data';

  const emit = defineEmits(['done', 'update:modelValue']);
  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    data: Object,
    vehicleId: {
      type: Number,
      default: 0
    },
    plateNumber: String
  });

  const title = ref('');

  /** 选择保险 */
  const showInsurance = ref(false);
  const openInsurance = () => {
    showInsurance.value = true;
  };

  /** 提交状态 */
  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);

  /** 表单数据 */
  const [form] = useFormData({
    glf_price: '', // 管理费
    glf_paid: '', // 管理费
    gps_price: '', // gps
    gps_paid: '', // gps
    eb_price: '', // 二保
    eb_paid: '', // 二保
    xx_price: '', // 学习
    xx_paid: '', // 学习
    gz_price: '', // 盖章
    gz_paid: '', // 盖章
    fw_price: '', // 法务
    fw_paid: '', // 法务
    qt_price: '', // 其他
    qt_paid: '', // 其他
    price: '', // 总计
    paid: '', // 实际付款
    pay_images: '', // 付款图片
    other: [],
    remark: '',
    dianfu: '无',
    dianfu_amount: '',
    dianfu_interest_rate: '',
    dianfu_start_date: '',
    dianfu_times: '',
    dianfu_images: '',
    fenqi: '无',
    fenqi_amount: '',
    fenqi_interest_rate: '',
    fenqi_start_date: '',
    fenqi_times: '',
    fenqi_images: '',
    insuranceList: []
  });

  const rules = reactive({
    insurance_id: [
      {
        required: true,
        message: '请选择保险公司',
        type: 'number',
        trigger: 'blur'
      }
    ]
  });

  /** 提交 */
  const save = () => {
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      var requestData = Object.assign({}, form);
      requestData.other = JSON.stringify(requestData.other);
      requestData.insuranceList = JSON.stringify(requestData.insuranceList);
      requestData.vehicle_id = props.vehicleId;
      requestData.plate_number = props.plateNumber;
      updateTrade(requestData)
        .then(() => {
          loading.value = false;
          EleMessage.success('操作成功');
          updateModelValue(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          console.log(e);
        });
    });
  };

  /** 选择完要出单的保险 */
  const chooseDone = (e) => {
    showInsurance.value = false;
    form.insuranceList = e;
    console.log(e, '选了什么鸟');
  };

  const selected = computed(() => {
    var selectText = '';
    console.log(form.insuranceList, '是什么');
    for (let i = 0; i < form.insuranceList.length; i++) {
      const v = form.insuranceList[i];
      selectText += v.cate + ':' + v.insurance + '[' + v.price + '元];';
    }
    return selectText;
  });

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value = props.plateNumber + '的出单通知';
      } else {
        console.log('关闭');
      }
    }
  );
</script>
